

<script>
	import { updateGroupLiveStateByGroupID } from "/global.js";
	import { openGroupLiveStream, closeGroupLiveStream } from "/request.js";
	
	export default {
		props: {
			avatarContent: String,
			groupId: Number,
			groupName: String,
			liveState: Boolean,		// true 为 表示直播间开启着， false表示关闭着
			required: true
		},
		methods: {
			async clickOpen()
			{
				var result = false;
				await openGroupLiveStream(this.groupId, this.groupName)
				.then(function(r){
					if (r)
						result = true;
				});
				if (result)
					updateGroupLiveStateByGroupID(this.groupId);
			},
			
			async clickClose()
			{
				var result = false;
				await closeGroupLiveStream(this.groupId)
				.then(function(r){
					if (r)
						result = true;
				});
				if (result)
					updateGroupLiveStateByGroupID(this.groupId);
			}
		}
	}
</script>


<template>
	<li class="list-item">
		<view class="list-item-info">
			<img alt="群聊头像" v-bind:src="avatarContent"/>
			<label>{{groupName}}</label>
		</view>
		<view class="list-item-buttons">
			<button class="button is-primary" v-if="!liveState" v-on:click="clickOpen">开启直播间</button>
			<button class="button is-danger" v-if="liveState" v-on:click="clickClose">关闭直播间</button>
		</view>
	</li>
</template>


<style>
	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items:center;
	}
	
	.list-item-info {
		display: flex;
		flex-direction: row;
		text-align: left;
		justify-content: left;
		align-items: center;
	}
	
	
	.list-item-info > label {
		margin-left: 5px;
		font-size: large;
	}
	
	.list-item-info > img {
		margin-right: 5px;
		width: 30%;
		height: 100%;
	}
	
</style>


